<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>{{ obj.title }}</title>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    {% include 'public_css.html' %}
    {% include 'public_js.html' %}
    <style>
        .leftbar {
            background-color: #3D4F5D;
        }
    </style>
</head>

<body style="background-color:#ADADAD;">
<!--

-->
<!-- 按钮触发器， 需要指定 target -->

<div class="am-offcanvas" id="left_bar">
    <div class="am-offcanvas-bar" id="left_bar">
        <div class="am-offcanvas-content">
            {% include 'leftbar.html' %}
        </div>
    </div>
</div>


<div class="am-panel-group am-g" style="background-color:#ADADAD;">
    <!-- header -->
    <div data-am-sticky>
        <!-- header -->
        <div data-am-sticky align="center">
            <header class="am-topbar" style="background-color:gray;">

                <div class="am-topbar-left am-u-sm-1 am-u-md-1">
                    <a class="am-btn am-btn-sm am-btn-warning am-topbar-btn" href="#"
                       data-am-offcanvas="{target: '#left_bar', effect: 'push'}">
                        <font color="#FFFFFF"> <span class="am-icon-bars"></span></font>
                    </a>
                </div>
                <div class="am-topbar-left am-u-sm-10" style="float: right;margin-right: 5%;padding-top: 5px">
                    <a href="javascript:void(0)" onclick="location.reload()"><font size="5"
                                                                                   color="white">{{ obj.title }}</font>
                    </a></div>
            </header>
        </div>
    </div>
    <!-- header end-->

    <div class="am-u-sm-12 am-u-md-10" style="background-color:#d0d0d0;">
        <div id="maincontent" data-am-widget="tabs" class="am-g am-panel-hd am-tabs am-tabs-d2">
            <ul class="am-tabs-nav am-cf am-nav-pills">
                <li class="am-active"><a href="[newbloglist]">最新鲜</a></li>
                <li><a href="[hotbloglist]">最热门</a></li>
                <li><a href="[classicalbloglist]">最经典</a></li>
            </ul>


            <!--搜索结果-->
            <div class="am-tabs-bd">
                <div newbloglist class="am-tab-panel am-active">

                    {% for blogdict in obj.new_blog %}
                        {% include 'bloglist.html' %}
                    {% endfor %}
                </div>

                <div hotbloglist class="am-tab-panel">

                    {% for blogdict in obj.hot_blog %}
                        {% include 'bloglist.html' %}
                    {% endfor %}

                </div>
                <div classicalbloglist class="am-tab-panel">
                    {% for blogdict in obj.classical_blog %}
                        {% include 'bloglist.html' %}
                    {% endfor %}

                </div>
            </div>
            <!--end for search-->
        </div>
    </div>
</div>

<div class="am-g" align="center" style="background-color:#BB3D00;border:thick solid #BB3D00">
    <div class="am-u-md-3" style="background-color:#BB3D00;">
        &nbsp
    </div>
    <div class="am-u-md-6" style="background-color:#BB3D00;letter-spacing:20px;border:thick solid white;"
         align="center">

        <B><font size="12" color="black" face="隶书">煅魂书阁</font></B>
        <B><font color="white" face="微软雅黑"><p>一个萦绕着书香的地方</p></font></B>
    </div>
    <div class="am-u-md-3" style="background-color:#BB3D00;">
        &nbsp
    </div>
</div>

{% include 'public_footer.html' %}
</body>

</html>